テキストボックスをデザインする

海搀は、デザイン步されたテキストボックスやテキストエリアを侯喇する数恕を豺棱します。先俐の咖や硷梧、秦肥などをスタイルシ〖トで恃构するだけで、さまざまなテキストボックス□テキストエリアを侯喇できるはずです。とりあえずは、いろいろと活してみるとよいでしょう。

まずは、FORMを网脱してテキストボックスやテキストエリアを侯喇します。この缄界に泼侍な恃构爬はありません。テキストボックスはINPUTタグ∈type掳拉"text"∷、テキストエリアはTEXTAREAタグを网脱してフォ〖ムの柒推を侯喇します。なお、介袋肋年では、テキストボックスやテキストエリアは笆布のサンプルのように山绩されます。

<FORM>
叹涟
<INPUT type="text" name="namae" size="20"><BR>
<BR>
ご罢斧ˇご炊鳞<BR>
<TEXTAREA name="iken" rows="5" cols="40"></TEXTAREA><BR>
<BR>
<INPUT type="submit" value="流慨">
</FORM>

鲁いては、テキストボックスをカスタマイズしていきましょう。テキストボックスのカスタマイズでは、先俐∈border∷と秦肥咖∈background-color∷のスタイルシ〖トを回年するのが跟蔡弄です。≈border∽のスタイルシ〖トでは、先俐の硷梧、吕さ、咖を染逞スペ〖スで惰磊って回年します。≈background-color∽のスタイルシ〖トは、咖を回年するだけで秦肥咖を恃构できます。なお、先俐の硷梧には笆布の猛を回年できます。

↑borederプロパティに回年できる先俐の硷梧
solid ∧∧∧∧ 奶撅の俐
double ∧∧∧∧ 企脚俐
dashed ∧∧∧∧ 爬俐
dotted ∧∧∧∧ 摧爬俐
groove ∧∧∧∧ 惟挛先∈各富は宝夹め布∷
ridge ∧∧∧∧ 惟挛先∈各富は焊夹め惧∷
inset ∧∧∧∧ 柄ボタンのように斧える先俐
outset ∧∧∧∧ 铺ボタンのように斧える先俐

叹涟
<INPUT type="text" name="namae" size="20"
style="border:dotted 5px #FF6633; background-color:#FFFF99">

テキストエアリアをカスタマイズする眷圭は、≈border∽や≈background-color∽に裁えて、スクロ〖ルバ〖の今及を恃构するのが跟蔡弄です。また、テキストボックスよりも烫姥が弓いため、≈background-image∽で秦肥に茶咙を回年するのも烫球いと蛔います。笆布に、そのサンプルを非很しておくのでカスタマイズの徊雇としてください。

ご罢斧ˇご炊鳞<BR>
<TEXTAREA name="iken" rows="5" cols="40"
style="border:double 5px #FF6633;
background-image:url('back.jpg');
scrollbar-face-color: #FF6633;
scrollbar-shadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
scrollbar-highlight-color: #999999;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;">
</TEXTAREA>

妝揤儌僶僀儖[UNLIMIT偑崱側傜1墌] EC僫價偱億僀儞偲 Yahoo 妝揤 LINE偑僨乕僞徚旓僛儘偱寧妟500墌乣両

柍椏儂乕儉儁乕僕柍椏偺僋儗僕僢僩僇乕僪奀奜奿埨峲嬻寯夝栺庤悢椏侽墌亂偁偟偨偱傫偒亃奀奜椃峴曐尟偑柍椏両奀奜儂僥儖